
// This Source Code Form is subject to the terms of the Mozilla Public
// License, v. 2.0. If a copy of the MPL was not distributed with this
// file, You can obtain one at https://mozilla.org/MPL/2.0/.

// -------------------- CTA logic ----------------------- //
.mzp-c-button.is-not-default,
.mzp-c-button.is-default {
    display: none;
}

.is-firefox .mzp-c-button.is-default {
    display: block;
}

html.is-firefox {
    #protocol-nav-download-firefox {
        display: none;
    }

    &.set-default-supported {
        .mzp-c-button.is-not-default {
            display: block;
        }

        .mzp-c-button.is-default {
            display: none;
        }


        &.is-firefox-default {
            .mzp-c-button.is-default {
                display: block;
            }

            .mzp-c-button.is-not-default {
                display: none;
            }
        }
    }

    &.ios {
        .c-page-header .app-store-badge {
            display: none;
        }
    }

    &.android {
        .c-page-header .play-store-badge {
            display: none;
        }
    }
}

// If Firefox is unsupported, it'll show an alternative CTA to download Firefox ESR
html.fx-unsupported {
    .cta-group {
        p {
            display: none;
        }
    }

    #protocol-nav-download-firefox {
       color: $color-black;

       a {
        color: $color-black;
        border: $border-black;
       }
    }
}

// Mobile CTA logic for Android and iOS.
.app-store-badge,
.play-store-badge {
    display: none;

    img {
        vertical-align: middle;
    }
}

html.ios,
html.android {
    #protocol-nav-download-firefox {
        display: none;
    }

    .c-sticky-note {
        &> span,
        .c-button-download-thanks {
            display: none;
        }
    }
}

html.ios {
    .app-store-badge {
        display: inline-block;
    }
}

html.android {
    .play-store-badge {
        display: inline-block;
    }
}

// -------------------- end CTA logic ----------------------- //

// -------------------- CTA styles ----------------------- //

.c-page-header-inner { /* stylelint-disable no-duplicate-selectors  */
    #protocol-nav-download-firefox {
        margin-bottom: 0;

        small {
            display: none;
        }
    }

    .mzp-c-button,
    #protocol-nav-download-firefox > .mzp-c-button {
        padding: $spacing-sm $spacing-lg;
        background-color: $color-yellow-20;
        background-image: linear-gradient(to right,$color-yellow-20, $color-orange-50, $color-yellow-20, $color-yellow-20);
        background-size: 300% 100%;
        border-radius: 0;
        color: $color-black;
        border-color: $color-black;
        transition: all 0.3s ease-out;
        @include text-body-lg;

        @media (prefers-reduced-motion: reduce) {
            background-image: linear-gradient(to right,$color-yellow-20, $color-orange-50);
                transition: background-color 0.3s ease-out;
            }

        &:hover,
        &:focus,
        &:active {
            border-color: $color-black;
            color: $color-black;
            box-shadow: $box-shadow-sm;
            background-position: 100% 0;

            @media (prefers-reduced-motion: reduce) {
                background-image: linear-gradient(to right,$color-yellow-20, $color-yellow-20);
            }
        }
    }
} // -------------------- end CTA styles ----------------------- //
